<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>transform 变形--旋转 rotate</title>
		<style>
			*, *:after, *:before {
				box-sizing: border-box;
			}
			.fill {
				display: inline-block;
				width: 100px;
				height: 100px;
				margin: 10px;
				position: relative;
				background: #03A9F4;
				opacity:0.5;
				box-shadow: 0 0 5px #ccc;
				/* -webkit-transition: 2s; */
				transition: 1s;
			}
			.rotate:hover {
				/* -webkit-transform: rotate(45deg); */
				transform: rotate(45deg);
			}
			.rotateX:hover {
				/* -webkit-transform: rotateX(45deg); */
				transform: rotateX(120deg);
			}
			.rotateY:hover {
				/* -webkit-transform: rotateY(45deg); */
				transform: rotateY(45deg);
			}
			.rotateZ:hover {
				/* -webkit-transform: rotateZ(45deg); */
				transform: rotateZ(45deg);
			}
			.rotate-60:hover {
				/* -webkit-transform: rotate(-60deg); */
				transform: rotate(-60deg);
			}
			.rotate3D:hover {
				/* -webkit-transform: rotate3d(1, 2, 1, 60deg); */
				transform: rotate3d(1, 2, 1, 60deg);
			}
		</style>
	</head>
	<body>
		<div class="fill rotate">rotate(45deg) </div>
		<div class="fill rotateX">rotateX(45deg)</div>
		<div class="fill rotateY">rotateY(45deg)</div>
		<div class="fill rotateZ">rotateZ(45deg)</div>
		<div class="fill rotate-60">rotate(-60deg) </div>
		<div class="fill rotate3D">rotate3d(1,2,1,60deg)</div>
	</body>
</html>
